<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增用户')" />
	<th:block th:include="include :: select2-css" />
</head>
<body>
    <div class="main-content">
        <form id="form-user-add" class="form-horizontal">
            <input name="deptId" type="hidden" id="treeId"/>
            <input name="wxUserId" id="wxUserId" hidden/>
            <h4 class="form-header h4">基本信息</h4>
            <div class="row">
            	<div class="col-sm-9">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">用户名称：</label>
                        <div class="col-sm-8">
                            <input name="userName" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" required>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-9">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">登录账号：</label>
                        <div class="col-sm-8">
                            <input id="loginName" name="loginName" placeholder="请输入登录账号" class="form-control" type="text" maxlength="30" required>
                        </div>
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-sm-9">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">用户性别：</label>
                        <div class="col-sm-8">
                            <select name="sex" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
				                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
				            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-9">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">登录密码：</label>
                        <div class="col-sm-8">
                            <input name="password" placeholder="请输入登录密码" class="form-control" type="password"  required>
                        </div>
                    </div>
                </div>

            </div>
            <div class="row">
            	<div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-3 control-label">角色：</label>
                        <div class="col-xs-9">
                            <label th:each="role:${roles}" class="check-box">
								<input name="role" type="checkbox" th:value="${role.roleId}" th:text="${role.roleName}" th:disabled="${role.status == '1'}">
							</label>
                        </div>
                    </div>
                </div>
            </div>
            <h4 class="form-header h4">员工微信</h4>
            <div class="row">
                <div class="col-sm-9">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">手机号码：</label>
                        <div class="col-sm-8">
                            <div class="input-group">
                                <input  id="phoneNum"  placeholder="请输入手机号码进行查询" class="form-control"
                                       type="text" maxlength="11" required >
                                <span class="input-group-addon" onclick="searchVip()"><i class="fa fa-search" ></i></span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-9">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">微信昵称：</label>
                        <div class="col-sm-8">
                            <input name="nickName" id="nickName" placeholder="用户公众号昵称" class="form-control" type="text" maxlength="30"
                                   required readonly>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: select2-js" />
	<script>
	    var prefix = ctx + "emp/emp";
	
        $("#form-user-add").validate({
        	onkeyup: false,
        	rules:{
        		loginName:{
        			minlength: 2,
        			maxlength: 20,
        			remote: {
                        url:  ctx+ "system/user/checkLoginNameUnique",
                        type: "post",
                        dataType: "json",
                        data: {
                        	"loginName": function() {
                                return $.common.trim($("#loginName").val());
                            }
                        },
                        dataFilter: function(data, type) {
                        	return $.validate.unique(data);
                        }
                    }
        		},
        		password:{
        			minlength: 5,
        			maxlength: 20
        		},
        	},
        	messages: {
                "loginName": {
                    remote: "用户已经存在"
                },
        		/*"phonenumber":{
                	remote: "手机号码已经存在"
        		}*/
            },
            focusCleanup: true
        });
        
        function submitHandler() {
	        if ($.validate.form()) {
	        	var data = $("#form-user-add").serializeArray();
	        	var roleIds = $.form.selectCheckeds("role");
	        	if (!roleIds){
                    $.modal.alertWarning('未选择角色')
	        	    return false;
                }
                var wxUserId = $("#wxUserId").val()
                if (!wxUserId){
                    $.modal.alertWarning('未选择绑定的用户')
                    return false;
                }
	        	data.push({"name": "roleIds", "value": roleIds});
	        	data.push({"name": "wxUserId", "value": wxUserId});
	        	data.push({"name": "phonenumber", "value": phonenumber});
	        	$.operate.post(prefix + "/add", data,function (res) {
                   if (res.code==0){
                       $.modal.msgReload("保存成功,正在刷新数据请稍后……", modal_status.SUCCESS);
                   } else {
                       $.modal.alertWarning(result.msg)
                   }
                });
	        }
	    }
        var phonenumber ;
        function searchVip() {
            $("#nickName").val('')
            $("#wxUserId").val('')
            var phoneNum=  $('#phoneNum').val()
            if (!phoneNum){
                $.modal.alertWarning("请输入手机号进行查找")
                return false
            }
            $.ajax({
                url: ctx+"/emp/emp/searchUser",
                type: 'post',
                data: {phoneNum:phoneNum},
                dataType: "json",
                beforeSend:function(){
                    $.modal.loading("正在查询信息中，请稍后...");
                },
                success: function(res) {
                    $.modal.closeLoading()
                    if (res.code==0){
                        if (res.data){
                            $("#nickName").val(res.data.nickName)
                            $("#wxUserId").val(res.data.id)
                            phonenumber =phoneNum;
                        }
                    } else {
                        $.modal.alertWarning(res.msg)
                    }
                }
            });

          /*  $.post(ctx+"/emp/emp/searchUser",{phoneNum:phoneNum},function (res) {
                if (res.code==0){
                    $("#nickName").val(res.data.nickName)
                    $("#wxUserId").val(res.data.id)
                } else {
                    $.modal.alertWarning(res.msg)
                }
            })*/
        }
    </script>
</body>
</html>